<%--
  Created by IntelliJ IDEA.
  User: cos
  Date: 2022/3/14
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<html>
<head>
    <title>Title</title>
    <style>
        #fu {
            width: 1200px;
            margin: 0px auto;
            text-align: center;
        }
    </style>

</head>
<body>
<div style="text-align: center">
    <div class="row">
        <form id="myForm" class="form-inline">
            <div class="col-md-3 col-md-offset-4">
                <strong>文档分类:</strong>
                <select class="form-control" name="categoryId" id="categoryId">
                    <%-- @TODO 使用ajax加载动态数据 --%>
                    <option value="0">--查询所有--</option>
                </select>
                <input type="button" id="btn2" value="查询">
                &nbsp;
            </div>
            <div class="col-md-1">
                <a href="/addBooks.jsp" class="btn btn-primary " role="button">新增电子文档</a>
            </div> &nbsp;
        </form>

    </div>
</div>
<div id="fu">
    <h1 style="color: #5cb85c">电子文档列表</h1>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>文档编号</th>
            <th>文档名称</th>
            <th>文档摘要</th>
            <th>上传人</th>
            <th>上传时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>

</div>
<script>
    function getBooks() {
        $.ajax({
            type: "get",
            url: "/entry/getBooksBycategoryId2?categoryId=" + $("#categoryId").val(),
            success: function (data) {
                if (data != null) {
                    $("#tb").empty();
                    for (let x in data) {
                        $("#tb").append("<tr>" +
                            "                <td>" + data[x].id + "</td>" +
                            "                <td>" + data[x].title + "</td>" +
                            "                <td>" + data[x].summary + "</td>" +
                            "                <td>" + data[x].uploaduser + "</td>" +
                            "                <td>" + data[x].createdate + "</td>" +
                            "                <td><a href='/entry/getBookById?id=" + data[x].id + "' class=\"btn btn-warning \" role=\"button\">修改</a>" +
                            "    <button onclick='del(" + data[x].id + ")' class=\"btn btn-danger \" role=\"button\">删除</button></td>" +
                            "            </tr>");
                    }
                } else {
                    $("#tb").append("哎呀没有数据啦");
                }
            }
        })
    }

    $(function () {
        $.ajax({
            type: "get",
            url: "/category/getAll",
            success: function (data) {
                for (let x in data) {
                    $("#categoryId").append("<option value='" + data[x].id + "'>" + data[x].name + "</option>")
                }
            }
        })
        //进入页面就加载一次数据
        getBooks();
        $("#btn2").click(function () {
            getBooks();
        })
    })

    function del(id) {
        if (confirm("确认删除吗")) {
            $.ajax({
                type: "post",
                url: "/entry/del/" + id,
                success: function (data) {
                    if (data == 1) {
                        alert("删除成功哈哈哈哈");
                        // location.reload();
                        //获取数据的函数
                        getBooks();
                    } else {
                        alert("删除失败哭哭哭哭");
                    }
                }
            })
        }
    }

</script>
</body>
</html>
